<template>
  <view class="user">
    <navBar title="我的"></navBar>
    <view class="user-container">
      <view class="title">个人信息</view>
      <!-- 头像 -->
      <view class="avator cell-item">
        <text>头像</text>
        <image :src="userInfo.headImgUrl" v-if="userInfo.headImgUrl" alt="头像"/>
        <image src="/static/img/tabbar/user.png" alt="头像" v-else/>
      </view>
      <!-- 姓名 -->
      <view class="username cell-item">
        <text>姓名</text>
        <text class="right-content">{{userInfo.name||'--'}}</text>
      </view>
      <!-- 邮箱 -->
      <view class="email cell-item">
        <text>邮箱</text>
        <text>{{userInfo.email||'--'}}</text>
      </view>
      <!-- 手机号 -->
      <view class="telPhone cell-item">
        <text>手机号</text>
        <text class="right-content">{{userInfo.telPhone||'--'}}</text>
      </view>
      <!-- 角色 -->
      <view class="role cell-item">
        <text>角色</text>
        <text class="right-content">{{userInfo.roleName||'--'}}</text>
      </view>
      <!-- 商家信息 -->
      <view class="title">商家信息</view>
      <!-- 商家logo -->
      <view class="merchant-logo cell-item">
        <text>商家logo</text>
        <image :src="merchantInfo.logo" v-if="merchantInfo.logo" alt="logo"/>
        <image src="/static/img/tabbar/user.png" alt="logo" v-else/>
      </view>
      <!-- 商家名称 -->
      <view class="regitster-info cell-item">
        <text>商家名称</text>
        <text class="right-content">{{merchantInfo.merchantName||'--'}}</text>
      </view>
      <!-- 商家地区 -->
      <view class="regitster-info cell-item">
        <text>商家地区</text>
        <text class="right-content">{{merchantInfo.address||'--'}}</text>
      </view>
      <!-- 商户描述 -->
      <view class="regitster-info cell-item">
        <text>商户描述</text>
        <text class="right-content">{{merchantInfo.merchantDesc||'--'}}</text>
      </view>
      <view class="logout" @click="logout">
        <text class="iconfont icon-tuichudenglu"></text>
        退出登录
      </view>
    </view>
  </view>
</template>

<script>
import {getCurrentUser,getMerchantInfo} from '@/common/api/api.js'
import navBar from "@/components/navbar/index.vue"
export default {
  components: {
    navBar,
  },
  data() {
    return {
      userInfo:{},
      merchantInfo:{},
    }
  },
  onReady() {},
  onLoad(){
    this.getCurrent()
  },
  methods: {
    logout() {
      uni.reLaunch({
        url: "/pages/login/index",
      })
    },
    async getCurrent(){
      const token = uni.getStorageSync('Token')
      let res = await getCurrentUser({token})
      let result = await getMerchantInfo({token})
      this.userInfo = res.data
      this.merchantInfo = result.data
    }
  },
}
</script>

<style lang="scss" scoped>
.title {
  padding: 10px;
  position: relative;
}
.title:before {
  content: "";
  height: 60%;
  width: 4rpx;
  display: inline-block;
  background: $nav_bg;
  position: absolute;
  left: 0;
  top: 20%;
}
.cell-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  color: $font_color;
  background-color: #fff;
  image {
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
  }
  .right-content{
    width: 70%;
    text-align: right;
  }
}

.user {
  background-color: $bg-color;

  .user-container {
    background-color: $bg-color;
    .avator {
      border-bottom: 2rpx solid $border_bt;
    }
    .username {
      border-bottom: 2rpx solid $border_bt;
    }
    .email{
      border-bottom: 2rpx solid $border_bt;
    }
    .role {
      border-bottom: 2rpx solid $border_bt;
    }
    .telPhone{
      border-bottom: 2rpx solid $border_bt;
    }
    .merchant-logo {
      border-bottom: 2rpx solid $border_bt;
    }
    .regitster-info {
      border-bottom: 2rpx solid $border_bt;
    }
  }
  .logout {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    margin-top: 20rpx;
    color: #f26363;
    .iconfont {
      font-size: 40rpx;
      margin-right: 10rpx;
      margin-top: 3rpx;
    }
  }
}
</style>
